<template>
  <div class="list">
    <div class="list-content" :style="!isView && { height: '100%' }">
      <div class="m-top">
        <div class="left">
          <a-input v-model:value="componentName" placeholder="请输入组件名称" />
          <a-button type="primary" class="search" @click="getData">查询</a-button>
          <a-button type="primary" @click="reset">重置</a-button>
        </div>
        <div class="right">
          <a-button type="primary" @click="handleAdd" v-if="!isView">新增组件</a-button>
        </div>
      </div>
      <!-- 列表 -->
      <a-row :gutter="[20, 20]" v-if="data.length">
        <a-col
          :xs="24"
          :sm="12"
          :md="6"
          :lg="6"
          :xl="4"
          v-for="item in data"
          :key="item.id"
          @click="() => isView && (currentData = item)"
        >
          <a-card hoverable style="">
            <template #cover>
              <a-image
                class="cover-img"
                :src="item.componentOriginalPath"
                fallback=""
              />
              <!-- <div class="card-right-wrapper" v-if="isView">

              </div> -->
              <span v-if="isView" class="card-right" :class="currentData.id === item.id ? ' select-bg ' : ''">
                <CheckOutlined></CheckOutlined>
              </span>
            </template>
            <template #actions>
              <div v-if="!isView" @click.stop="handleConfigure(item)"><setting-outlined key="setting" /> 配置</div>
              <div v-if="!isView" @click.stop="handleEdit(item)"><edit-outlined key="edit" />编辑</div>
              <div v-if="!isView" @click.stop="handleDel(item)"><delete-outlined />删除</div>
              <a-popover title="移动到新的分组" trigger="click">
                <template #content>
                  <a-select style="width: 100%" v-model:value="selectValue">
                    <a-select-option v-for="i in groupList" :key="i.id" :value="i.id">{{
                      i.groupName
                    }}</a-select-option>
                  </a-select>
                  <div class="move">
                    <!-- <a-button size="small" @click="popoverVisible = false">取消</a-button> -->
                    <a-button type="primary" size="small" class="confirm" @click="moveGroup(item)">确认</a-button>
                  </div>
                </template>
                <div v-if="!isView"><edit-outlined key="edit" />移动</div>
              </a-popover>
              <!-- <div v-if="!isView" @click.stop="modalVisible = true"><edit-outlined key="edit" />移动</div> -->
            </template>
            <a-card-meta :title="item.componentName">
              <template #description>
                <span>类 型：{{ item.componentType == 1 ? '业务' : '详情' }}</span>
                <span>所属母版：{{ item.templateName }}</span>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>

      <a-spin class="spin-loading" v-else-if="loading" />
      <Empty v-else></Empty>
    </div>

    <!-- 组件表单 -->
    <component-form ref="componentForm" @submit="submit" :disabled="isView" />

    <!-- 组件配置 -->
    <ComponentConfigure ref="componentConfigure" @submit="configureSubmit" :disabled="isView"></ComponentConfigure>
  </div>
</template>

<script>
import { SettingOutlined, EditOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons-vue'
import ComponentForm from './ComponentForm.vue'
import componentApi from '@/api/management/component'
import ComponentConfigure from './ComponentConfigure'
import Empty from '@/views/business-component/components/empty'
import { toRaw } from 'vue'

/**
 * 组件列表
 * @author 朱琦
 * @date   时间：2023/1/11
 */
export default {
  name: 'ComponentList',
  components: {
    SettingOutlined,
    EditOutlined,
    DeleteOutlined,
    ComponentForm,
    ComponentConfigure,
    Empty,
    CheckOutlined
  },
  props: {
    // 组件分组分组id 查询用 可为空
    groupId: {
      type: String,
      default: ''
    },
    // 组件分组列表
    groupList: {
      type: Array,
      default: () => []
    },

    // 母版id 查询用 可为空
    parentTemplateId: {
      type: String,
      default: null
    },
    // 组件类型 查询用 可为空
    componentType: {
      type: String,
      default: null
    },
    // 是否只能查看
    isView: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      data: [],
      currentIndex: null,
      loading: false,
      componentName: null,
      currentData: {},
      selectValue: null, // 所选中的分组
      popoverVisible: false // 气泡卡片显隐
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * 获取列表数据
     */
    getData() {
      this.loading = true
      const params = {
        groupId: this.groupId,
        componentName: this.componentName,
        parentTemplateId: this.parentTemplateId, // 'c853870d93f4d12003242ca22d22c610'
        componentType: this.componentType || null
      }
      componentApi
        .getComponentList(params)
        .then(res => {
          this.data = res.data || []
          // this.data = new Array(200).fill({})
        })
        .catch(() => {
          this.data = []
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 点击新增分组
     */
    handleAdd() {
      this.$refs.componentForm.show()
    },
    /**
     * 点击编辑分组
     */
    handleEdit(item) {
      this.$refs['componentForm'].show(false, item)
    },

    /**
     * 移动组件到新的分组
     */
    moveGroup(item) {
      if (!this.selectValue) return this.$message.warning('未选中分组')
      if (item.groupId == this.selectValue) return this.$message.warning('已在该分组')
      delete item.componentOriginalPath
      item.groupId = this.selectValue
      componentApi.updateComponent(item).then(res => {
        this.$message.success('移动分组成功')
        this.getData()
      })
    },

    /**
     * 点击删除分组
     */
    handleDel(item) {
      this.$confirm({
        title: '确定删除该组件吗？',
        onOk: () => {
          componentApi
            .deleteComponent({ id: item.id })
            .then(res => {
              this.$message.success('删除成功')
              this.getData()
            })
            .catch(() => {
              this.$message.error('删除失败')
            })
        }
      })
    },
    /**
     * 数据提交
     * @param {Object} data 数据
     * @param {Boolean} isAdd 是否是新增
     */
    submit(data, isAdd) {
      if (isAdd) {
        // 新增
        componentApi.addComponent(toRaw({ ...data, groupId: this.groupId })).then(res => {
          this.$refs.componentForm.hide()
          this.getData()
        })
      } else {
        // 更新
        componentApi.updateComponent({ ...data, groupId: this.groupId }).then(res => {
          this.$refs.componentForm.hide()
          this.getData()
        })
      }
    },
    /**
     * 点击配置组件
     */
    handleConfigure(item) {
      this.$refs['componentConfigure'].show(item)
    },
    /**
     * 更新配置提交事件
     * **/
    configureSubmit(data) {
      componentApi.updateComponent({ ...data, groupId: this.groupId }).then(res => {
        this.$message.success('更新成功')
        this.$refs['componentConfigure'].hide()
        this.getData()
      })
    },
    reset() {
      this.componentName = null
      this.getData()
    },
    /**
     * 获取选中数据
     */
    getSelectData() {
      return this.currentData
    }
  }
}
</script>

<style scoped lang="less">
.ant-col {
  display: flex;
  flex-direction: column;
  .ant-radio-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1px;
  }
}
.list {
  height: 100%;

  display: flex;
  flex-direction: column;
  .list-content {
    display: flex;
    flex-direction: column;
    // height: calc(100% - 30px);
  }
  .m-top {
    display: flex;
    justify-content: space-between;
    .search {
      margin: 0 20px;
    }
  }
  /deep/ .ant-radio-group {
    flex: 1;
    width: 100%;
    overflow: hidden;
  }
  /deep/ .ant-card-meta-description {
    display: flex;
    justify-content: space-between;
  }

  /deep/.ant-card-cover {
    height: 150px;
    overflow: hidden;
    margin: 0;
    position: relative;
    .ant-image {
      height: 100%;
    }
    .cover-img {
      height: 100%;
      object-fit: cover;
    }
    .card-right {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 30px;
      height: 30px;
      background: rgba(204, 204, 204, 0.6);
      border-bottom-left-radius: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      .anticon {
        font-size: 16px;
        margin: 0;
      }
    }
    .select-bg {
      background-color: #1890ff;
    }
  }

  /deep/.ant-row {
    padding-left: 1px;
    max-height: 100%;
    overflow: auto;
  }
  .spin-loading {
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.move {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;

  .confirm {
    margin-left: 8px;
  }
}
</style>
